<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vscode 使用指南 | 前端一锅煮</title>
    <meta name="description" content="vscode 使用指南">
    <link rel="icon" href="/blog/logo.jpg">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#000000">
    <meta name="keywords" content="vscode,使用指南">
    <link rel="preload" href="/blog/assets/css/0.styles.3a36f1f3.css" as="style"><link rel="preload" href="/blog/assets/js/app.2d50d9dc.js" as="script"><link rel="preload" href="/blog/assets/js/29.4c6c0c28.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.cf06b472.js"><link rel="prefetch" href="/blog/assets/js/11.57a175c6.js"><link rel="prefetch" href="/blog/assets/js/12.b32f2db2.js"><link rel="prefetch" href="/blog/assets/js/13.818a88b3.js"><link rel="prefetch" href="/blog/assets/js/14.1c54dd87.js"><link rel="prefetch" href="/blog/assets/js/15.40ea867f.js"><link rel="prefetch" href="/blog/assets/js/16.379721e3.js"><link rel="prefetch" href="/blog/assets/js/17.0b8bcd15.js"><link rel="prefetch" href="/blog/assets/js/18.41bb3889.js"><link rel="prefetch" href="/blog/assets/js/19.6362af40.js"><link rel="prefetch" href="/blog/assets/js/2.55dfcea5.js"><link rel="prefetch" href="/blog/assets/js/20.4ce40a8a.js"><link rel="prefetch" href="/blog/assets/js/21.ba4dcc65.js"><link rel="prefetch" href="/blog/assets/js/22.d2fad5dd.js"><link rel="prefetch" href="/blog/assets/js/23.2a976f6d.js"><link rel="prefetch" href="/blog/assets/js/24.a6407b77.js"><link rel="prefetch" href="/blog/assets/js/25.28818591.js"><link rel="prefetch" href="/blog/assets/js/26.a4d6759f.js"><link rel="prefetch" href="/blog/assets/js/27.fe72fdf4.js"><link rel="prefetch" href="/blog/assets/js/28.ca4a85a9.js"><link rel="prefetch" href="/blog/assets/js/3.e235257b.js"><link rel="prefetch" href="/blog/assets/js/30.6aa9a972.js"><link rel="prefetch" href="/blog/assets/js/31.b7bccc14.js"><link rel="prefetch" href="/blog/assets/js/32.3544b6a6.js"><link rel="prefetch" href="/blog/assets/js/33.3bb697fd.js"><link rel="prefetch" href="/blog/assets/js/34.ac7cecf3.js"><link rel="prefetch" href="/blog/assets/js/35.b26fe96f.js"><link rel="prefetch" href="/blog/assets/js/36.91eb88f8.js"><link rel="prefetch" href="/blog/assets/js/37.baa3c248.js"><link rel="prefetch" href="/blog/assets/js/4.04108111.js"><link rel="prefetch" href="/blog/assets/js/5.2e3bc3e6.js"><link rel="prefetch" href="/blog/assets/js/6.88208dc4.js"><link rel="prefetch" href="/blog/assets/js/7.7913f494.js"><link rel="prefetch" href="/blog/assets/js/8.64ff3aa5.js"><link rel="prefetch" href="/blog/assets/js/9.43d70a25.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.3a36f1f3.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">前端一锅煮</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">首页</a></div><div class="nav-item"><a href="/blog/page/list/" class="nav-link router-link-active">全部文章</a></div><div class="nav-item"><a href="/blog/page/vuepress/" class="nav-link">VuePress笔记</a></div><div class="nav-item"><a href="/blog/page/about/" class="nav-link">关于我</a></div> <a href="https://gitee.com/cjm0/blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>vscode 使用指南</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/blog/page/list/vscode.html#官方地址" class="sidebar-link">官方地址</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/vscode.html#汉化" class="sidebar-link">汉化</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/vscode.html#颜色主题" class="sidebar-link">颜色主题</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/vscode.html#图标主题" class="sidebar-link">图标主题</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/vscode.html#快捷键" class="sidebar-link">快捷键</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/vscode.html#代码片段" class="sidebar-link">代码片段</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/blog/page/list/vscode.html#插件" class="sidebar-link">插件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_1-settings-sync" class="sidebar-link">1.Settings Sync</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_2-debugger-for-chrome" class="sidebar-link">2.Debugger for Chrome</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_3-vscode-iocns" class="sidebar-link">3.vscode-iocns</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_4-chinese-language-pack-for-vscode" class="sidebar-link">4.chinese language pack for vscode</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_5-eslint" class="sidebar-link">5.ESLint</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_6-filesize" class="sidebar-link">6.filesize</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_7-import-cost" class="sidebar-link">7.Import Cost</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_8-path-intellisense" class="sidebar-link">8.Path Intellisense</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_9-auto-rename-tag" class="sidebar-link">9.Auto Rename Tag</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_10-vetur" class="sidebar-link">10.vetur</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_11-html-snippets" class="sidebar-link">11.HTML Snippets</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_12-javascript-es6-code-snippets" class="sidebar-link">12.JavaScript(ES6) code snippets</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_13-npm" class="sidebar-link">13.npm</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_14-view-node-package" class="sidebar-link">14.View Node Package</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_15-gitlens" class="sidebar-link">15.GitLens</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_16-prettier-code-formatter" class="sidebar-link">16.prettier-code formatter</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_17-json-tools" class="sidebar-link">17.JSON Tools</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_18-open-in-browser" class="sidebar-link">18.open in browser</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_19-quokka" class="sidebar-link">19.quokka</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_20-todo-tree" class="sidebar-link">20.Todo Tree</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_21-faker" class="sidebar-link">21.Faker</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_22-minify" class="sidebar-link">22.Minify</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_23-wakatime" class="sidebar-link">23.wakatime</a></li><li class="sidebar-sub-header"><a href="/blog/page/list/vscode.html#_24-code-runner" class="sidebar-link">24.Code Runner</a></li></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="vscode-使用指南"><a href="#vscode-使用指南" class="header-anchor">#</a> vscode 使用指南</h1> <h2 id="官方地址"><a href="#官方地址" class="header-anchor">#</a> 官方地址</h2> <p><a href="https://code.visualstudio.com/docs/editor/debugging" target="_blank" rel="noopener noreferrer">官方文档和下载<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="汉化"><a href="#汉化" class="header-anchor">#</a> 汉化</h2> <p><code>command+shift+p -&gt; configure language -&gt; Configure Display Language -&gt; zh-cn</code></p> <h2 id="颜色主题"><a href="#颜色主题" class="header-anchor">#</a> 颜色主题</h2> <p>使用默认的 <code>Monokai</code> 主题</p> <h2 id="图标主题"><a href="#图标主题" class="header-anchor">#</a> 图标主题</h2> <p>使用默认的 <code>vscode-icons</code> 插件图标</p> <h2 id="快捷键"><a href="#快捷键" class="header-anchor">#</a> 快捷键</h2> <p><code>command 1 2 3</code> 分屏<br> <code>command b</code> 侧边栏显隐<br> <code>command k v</code> markdown 打开侧边预览<br> <code>command shift k</code> 删除当前行<br> <code>command /</code> 单行注释<br> <code>command option m</code> JSON 解压缩<br> <code>command + K + J</code> 新建一个及试运行的 js 文件</p> <p><code>option shift a</code> 多行注释<br> <code>option shift f</code> 格式化代码<br> <code>option shift ↑ ↓</code> 复制当前行<br> <code>option m</code> JSON 压缩</p> <p><code>control ~</code> 终端显隐<br> <code>control command space</code> 唤出表情、常用字符<br> <code>control option n</code> 运行代码</p> <h2 id="代码片段"><a href="#代码片段" class="header-anchor">#</a> 代码片段</h2> <p>首选项 -&gt; 用户代码片段 -&gt; 新建全局代码片段</p> <h2 id="插件"><a href="#插件" class="header-anchor">#</a> 插件</h2> <h3 id="_1-settings-sync"><a href="#_1-settings-sync" class="header-anchor">#</a> 1.Settings Sync</h3> <p>使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。</p> <h3 id="_2-debugger-for-chrome"><a href="#_2-debugger-for-chrome" class="header-anchor">#</a> 2.Debugger for Chrome</h3> <p>从vscode调试在Google Chrome中运行的JavaScript代码。用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的vscode扩展。</p> <h3 id="_3-vscode-iocns"><a href="#_3-vscode-iocns" class="header-anchor">#</a> 3.vscode-iocns</h3> <p>图标插件</p> <h3 id="_4-chinese-language-pack-for-vscode"><a href="#_4-chinese-language-pack-for-vscode" class="header-anchor">#</a> 4.chinese language pack for vscode</h3> <p>中文包</p> <h3 id="_5-eslint"><a href="#_5-eslint" class="header-anchor">#</a> 5.ESLint</h3> <p>检查 javascript 语法错误与提示</p> <h3 id="_6-filesize"><a href="#_6-filesize" class="header-anchor">#</a> 6.filesize</h3> <p>在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间</p> <h3 id="_7-import-cost"><a href="#_7-import-cost" class="header-anchor">#</a> 7.Import Cost</h3> <p>对引入的计算大小</p> <h3 id="_8-path-intellisense"><a href="#_8-path-intellisense" class="header-anchor">#</a> 8.Path Intellisense</h3> <p>自动填充文件名</p> <h3 id="_9-auto-rename-tag"><a href="#_9-auto-rename-tag" class="header-anchor">#</a> 9.Auto Rename Tag</h3> <p>自动完成另一侧标签的同步修改</p> <h3 id="_10-vetur"><a href="#_10-vetur" class="header-anchor">#</a> 10.vetur</h3> <p>vue 语法高亮、智能感知、Emmet等</p> <h3 id="_11-html-snippets"><a href="#_11-html-snippets" class="header-anchor">#</a> 11.HTML Snippets</h3> <p>完整的HTML代码提示，包括HTML5</p> <h3 id="_12-javascript-es6-code-snippets"><a href="#_12-javascript-es6-code-snippets" class="header-anchor">#</a> 12.JavaScript(ES6) code snippets</h3> <p>ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间。</p> <h3 id="_13-npm"><a href="#_13-npm" class="header-anchor">#</a> 13.npm</h3> <p>使用 package.json 验证已安装的软件包。确保已安装的软件包版本号正确，高亮显示 package.json 中缺少的已安装软件包以及尚未安装的软件包。</p> <h3 id="_14-view-node-package"><a href="#_14-view-node-package" class="header-anchor">#</a> 14.View Node Package</h3> <p>使用此扩展快速查看 Node 包源，允许您直接从 vscode 打开 Node 包仓库库/文档。</p> <h3 id="_15-gitlens"><a href="#_15-gitlens" class="header-anchor">#</a> 15.GitLens</h3> <p>增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等。</p> <h3 id="_16-prettier-code-formatter"><a href="#_16-prettier-code-formatter" class="header-anchor">#</a> 16.prettier-code formatter</h3> <p>格式化代码工具</p> <h3 id="_17-json-tools"><a href="#_17-json-tools" class="header-anchor">#</a> 17.JSON Tools</h3> <p>JSON 格式化工具，<code>command option m</code> 解压缩，<code>option m</code> 压缩</p> <h3 id="_18-open-in-browser"><a href="#_18-open-in-browser" class="header-anchor">#</a> 18.open in browser</h3> <p>在浏览器打开文件</p> <h3 id="_19-quokka"><a href="#_19-quokka" class="header-anchor">#</a> 19.quokka</h3> <p>一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。<code>command + K + J</code></p> <h3 id="_20-todo-tree"><a href="#_20-todo-tree" class="header-anchor">#</a> 20.Todo Tree</h3> <p>此扩展可以快速搜索（使用 ripgrep）您的工作区以获取 TODO 和 FIXME 等注释标记，并在资源管理器窗格的树视图中显示。 单击树中的 TODO 将打开文件并将光标放在包含 TODO 的行上。</p> <h3 id="_21-faker"><a href="#_21-faker" class="header-anchor">#</a> 21.Faker</h3> <p>用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。</p> <h3 id="_22-minify"><a href="#_22-minify" class="header-anchor">#</a> 22.Minify</h3> <p>压缩当前 HTML、CSS、JS 生成 .min文件</p> <h3 id="_23-wakatime"><a href="#_23-wakatime" class="header-anchor">#</a> 23.wakatime</h3> <p>可以帮助我们记录每一个项目下所用的时间，绑定账号后每周会给你发一份邮件，提示你在不同的编辑器、项目和操作系统下花了多长时间。</p> <h3 id="_24-code-runner"><a href="#_24-code-runner" class="header-anchor">#</a> 24.Code Runner</h3> <p>运行js代码</p></div> <div class="page-edit"><div class="edit-link"><a href="https://gitee.com/cjm0/blog/edit/master/docs/page/list/vscode.md" target="_blank" rel="noopener noreferrer">在 Gitee 上编辑此页</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></div> <!----> </div> <!----></div></div>
    <script src="/blog/assets/js/app.2d50d9dc.js" defer></script><script src="/blog/assets/js/29.4c6c0c28.js" defer></script>
  </body>
</html>
